<template>
  <div>
    <div class="gva-search-box">
      <el-form ref="elSearchFormRef"
               :inline="true"
               :model="searchInfo"
               class="demo-form-inline"
               :rules="searchRule"
               @keyup.enter="onSubmit">
        <el-form-item label="创建日期"
                      prop="createdAt">
          <template #label>
            <span>
              创建日期
              <el-tooltip content="搜索范围是开始日期（包含）至结束日期（不包含）">
                <el-icon>
                  <QuestionFilled />
                </el-icon>
              </el-tooltip>
            </span>
          </template>
          <el-date-picker v-model="searchInfo.startCreatedAt"
                          type="datetime"
                          placeholder="开始日期"
                          :disabled-date="time=> searchInfo.endCreatedAt ? time.getTime() > searchInfo.endCreatedAt.getTime() : false"></el-date-picker>
          —
          <el-date-picker v-model="searchInfo.endCreatedAt"
                          type="datetime"
                          placeholder="结束日期"
                          :disabled-date="time=> searchInfo.startCreatedAt ? time.getTime() < searchInfo.startCreatedAt.getTime() : false"></el-date-picker>
        </el-form-item>
        <el-form-item label="企业名称"
                      prop="name">
          <el-input v-model="searchInfo.name"
                    placeholder="搜索条件" />

        </el-form-item>

        <el-form-item label="企业分类"
                      prop="classifyId">
          <el-select v-model="searchInfo.classifyId"
                     filterable
                     clearable
                     placeholder="搜索条件">
            <el-option v-for="item in classifyList"
                       :key="item.ID"
                       :label="item.name"
                       :value="item.ID" />
          </el-select>
          <el-button type="primary"
                     :icon="Setting"
                     @click="openClassifyDialog"
                     circle />
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     icon="search"
                     @click="onSubmit">查询</el-button>
          <el-button icon="refresh"
                     @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="gva-table-box">
      <div class="gva-btn-list">
        <el-button type="primary"
                   icon="plus"
                   @click="openDialog">新增</el-button>
        <el-popover v-model:visible="deleteVisible"
                    :disabled="!multipleSelection.length"
                    placement="top"
                    width="160">
          <p>确定要删除吗？</p>
          <div style="text-align: right; margin-top: 8px;">
            <el-button type="primary"
                       link
                       @click="deleteVisible = false">取消</el-button>
            <el-button type="primary"
                       @click="onDelete">确定</el-button>
          </div>
          <template #reference>
            <el-button icon="delete"
                       style="margin-left: 10px;"
                       :disabled="!multipleSelection.length"
                       @click="deleteVisible = true">删除</el-button>
          </template>
        </el-popover>
      </div>
      <el-table ref="multipleTable"
                style="width: 100%"
                tooltip-effect="dark"
                :data="tableData"
                row-key="ID"
                @selection-change="handleSelectionChange">

        <el-table-column type="selection"
                         width="55" />
        <el-table-column label="序号"
                         type="index"
                         width="100px"
                         align="center" />
        <el-table-column align="left"
                         label="日期"
                         width="180">
          <template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>
        </el-table-column>
        <el-table-column align="left"
                         label="企业名称"
                         prop="name"
                         width="120" />
        <el-table-column align="left"
                         label="企业分类"
                         prop="classify.name"
                         width="120" />
        <el-table-column align="left"
                         label="企业信息"
                         prop="msg"
                         width="120" />
        <el-table-column align="left"
                         label="操作">
          <template #default="scope">
            <el-button type="primary"
                       link
                       class="table-button"
                       @click="getDetails(scope.row)">
              <el-icon style="margin-right: 5px">
                <InfoFilled />
              </el-icon>
              查看详情
            </el-button>
            <el-button type="primary"
                       link
                       icon="edit"
                       class="table-button"
                       @click="updateEnterpriseFunc(scope.row)">变更</el-button>
            <el-button type="primary"
                       link
                       icon="delete"
                       @click="deleteRow(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination layout="total, sizes, prev, pager, next, jumper"
                       :current-page="page"
                       :page-size="pageSize"
                       :page-sizes="[10, 30, 50, 100]"
                       :total="total"
                       @current-change="handleCurrentChange"
                       @size-change="handleSizeChange" />
      </div>
    </div>
    <el-dialog v-model="dialogFormVisible"
               :before-close="closeDialog"
               :title="type==='create'?'添加':'修改'"
               destroy-on-close>
      <el-scrollbar height="500px">
        <el-form :model="formData"
                 label-position="right"
                 ref="elFormRef"
                 :rules="rule"
                 label-width="100px">
          <el-form-item label="企业名称:"
                        prop="name">
            <el-input v-model="formData.name"
                      :clearable="true"
                      placeholder="请输入企业名称" />
          </el-form-item>
          <el-form-item label="企业分类:"
                        prop="classifyId">
            <el-select v-model="formData.classifyId"
                       filterable
                       clearable
                       placeholder="企业分类">
              <el-option v-for="item in classifyList"
                         :key="item.ID"
                         :label="item.name"
                         :value="item.ID" />
            </el-select>
          </el-form-item>
          <el-form-item label="企业信息:"
                        prop="msg">
            <el-input v-model="formData.msg"
                      :rows="10"
                      show-word-limit
                      maxlength="300"
                      type="textarea"
                      placeholder="请输入详细信息" />
          </el-form-item>
        </el-form>
      </el-scrollbar>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary"
                     v-stopReClick
                     @click="enterDialog">确 定</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="detailShow"
               style="width: 800px"
               lock-scroll
               :before-close="closeDetailShow"
               title="查看详情"
               destroy-on-close>
      <el-scrollbar height="550px">
        <el-descriptions column="1"
                         border>
          <el-descriptions-item label="企业名称">
            {{ formData.name }}
          </el-descriptions-item>
          <el-descriptions-item label="企业分类">
            {{ find(classifyList,formData.classifyId).name }}
          </el-descriptions-item>
          <el-descriptions-item label="企业信息">
            {{ formData.msg }}
          </el-descriptions-item>
        </el-descriptions>
      </el-scrollbar>
    </el-dialog>
    <el-dialog v-model="classifyDialog"
               style="width: 800px"
               lock-scroll
               :before-close="closeClassifyDialog"
               title="分类设置"
               destroy-on-close>
      <el-dialog v-model="classifyDoDialog"
                 width="30%"
                 :title="type==='create'?'添加':'修改'"
                 append-to-body>
        <el-scrollbar height="200px">
          <el-form :model="classifyDataForm"
                   label-position="right"
                   :rules="classifyRule"
                   ref="classifyDataFormRef"
                   label-width="100px">
            <el-form-item label="分类名称:"
                          prop="name">
              <el-input v-model="classifyDataForm.name"
                        :clearable="true"
                        placeholder="请输入分类名称" />
            </el-form-item>
          </el-form>
        </el-scrollbar>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="closeClassifyDoDialog">取 消</el-button>
            <el-button type="primary"
                       @click="enterClassifyDoDialog"
                       v-stopReClick>确 定</el-button>
          </div>
        </template>
      </el-dialog>
      <el-table :data="filterClassifyList"
                stripe
                style="100%">
        <el-table-column label="序号"
                         type="index"
                         width="100px"
                         align="center" />
        <el-table-column prop="name" 
                         label="分类名称"
                         width="400px" />
        <el-table-column align="right">
          <template #header>
            <el-input v-model="classiftySearch"
                      size="small"
                      placeholder="Type to search"
                      style="width: 200px;" />
            <el-button type="primary"
                       :icon="Plus"
                       @click="openClassifyAdd"
                       size="small"
                       circle />
          </template>
          <template #default="scope">
            <el-button size="small"
                       @click="openClassifyUpdate(scope.row)">修改</el-button>

            <el-button size="small"
                       @click="classifyDelete( scope.row)"
                       type="danger">删除</el-button>

          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script setup>
import {
  createEnterprise,
  deleteEnterprise,
  deleteEnterpriseByIds,
  updateEnterprise,
  findEnterprise,
  getEnterpriseList
} from '@/api/enterprise'
import {
  Setting,
  Plus
} from '@element-plus/icons-vue'
import {
  createClassify,
  deleteClassify,
  updateClassify,
  getClassifyList
} from '@/api/classify'

// 全量引入格式化工具 请按需保留
import { getDictFunc, formatDate, formatBoolean, filterDict, ReturnArrImg, onDownloadFile } from '@/utils/format'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, reactive, computed } from 'vue'
import { number } from 'echarts'

defineOptions({
  name: 'Enterprise'
})

// 自动化生成的字典（可能为空）以及字段
const formData = ref({
  name: '',
  classifyId: null,
  msg: '',
})


// 验证规则
const rule = reactive({
  classifyId: [
    { required: true, message: '请选择分类', trigger: 'blur' },
    { "pattern": /^[1-9]*$/, message: '请选择分类', trigger: 'blur' },
  ],
  name: [
    { required: true, message: '请输入分类名', trigger: 'blur' },
    { min: 1, max: 20, message: '长度 在 1 到 20长度之间', trigger: 'blur' },
  ],
})

const searchRule = reactive({
  createdAt: [
    {
      validator: (rule, value, callback) => {
        if (searchInfo.value.startCreatedAt && !searchInfo.value.endCreatedAt) {
          callback(new Error('请填写结束日期'))
        } else if (!searchInfo.value.startCreatedAt && searchInfo.value.endCreatedAt) {
          callback(new Error('请填写开始日期'))
        } else if (searchInfo.value.startCreatedAt && searchInfo.value.endCreatedAt && (searchInfo.value.startCreatedAt.getTime() === searchInfo.value.endCreatedAt.getTime() || searchInfo.value.startCreatedAt.getTime() > searchInfo.value.endCreatedAt.getTime())) {
          callback(new Error('开始日期应当早于结束日期'))
        } else {
          callback()
        }
      }, trigger: 'change',
    },
  ],
})

const classifyRule = reactive({
  name: [
    { required: true, message: '请输入分类名', trigger: 'blur' },
    { min: 1, max: 20, message: '长度 在 1 到 20长度之间', trigger: 'blur' },
  ],
})

const elFormRef = ref()
const elSearchFormRef = ref()

// =========== 表格控制部分 ===========
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const tableData = ref([])
const searchInfo = ref({})

// 重置
const onReset = () => {
  searchInfo.value = {}
  getTableData()
}

// 搜索
const onSubmit = () => {
  elSearchFormRef.value?.validate(async (valid) => {
    if (!valid) return
    page.value = 1
    pageSize.value = 10
    getTableData()
  })
}

// 分页
const handleSizeChange = (val) => {
  pageSize.value = val
  getTableData()
}

// 修改页面容量
const handleCurrentChange = (val) => {
  page.value = val
  getTableData()
}

// 查询
const getTableData = async () => {
  const table = await getEnterpriseList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
  if (table.code === 0) {
    tableData.value = table.data.list
    total.value = table.data.total
    page.value = table.data.page
    pageSize.value = table.data.pageSize
  }
}

getTableData()

//获取分类列表
const classifyList = ref([])
const getClassifyData = async () => {
  const table = await getClassifyList()
  if (table.code === 0) {
    classifyList.value = table.data.list
  }
}

getClassifyData()

// ============== 表格控制部分结束 ===============

// 获取需要的字典 可能为空 按需保留
const setOptions = async () => {
}

// 获取需要的字典 可能为空 按需保留
setOptions()


// 多选数据
const multipleSelection = ref([])
// 多选
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

// 删除行
const deleteRow = (row) => {
  ElMessageBox.confirm('确定要删除吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteEnterpriseFunc(row)
  })
}


// 批量删除控制标记
const deleteVisible = ref(false)

// 多选删除
const onDelete = async () => {
  const ids = []
  if (multipleSelection.value.length === 0) {
    ElMessage({
      type: 'warning',
      message: '请选择要删除的数据'
    })
    return
  }
  multipleSelection.value &&
    multipleSelection.value.map(item => {
      ids.push(item.ID)
    })
  const res = await deleteEnterpriseByIds({ ids })
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: '删除成功'
    })
    if (tableData.value.length === ids.length && page.value > 1) {
      page.value--
    }
    deleteVisible.value = false
    getTableData()
  }
}

// 行为控制标记（弹窗内部需要增还是改）
const type = ref('')

// 更新行
const updateEnterpriseFunc = async (row) => {
  const res = await findEnterprise({ ID: row.ID })
  type.value = 'update'
  if (res.code === 0) {
    formData.value = res.data.reenterprise
    dialogFormVisible.value = true
  }
}


// 删除行
const deleteEnterpriseFunc = async (row) => {
  const res = await deleteEnterprise({ ID: row.ID })
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: '删除成功'
    })
    if (tableData.value.length === 1 && page.value > 1) {
      page.value--
    }
    getTableData()
  }
}

// 弹窗控制标记
const dialogFormVisible = ref(false)


// 查看详情控制标记
const detailShow = ref(false)


// 打开详情弹窗
const openDetailShow = () => {
  detailShow.value = true
}


// 打开详情
const getDetails = async (row) => {
  // 打开弹窗
  const res = await findEnterprise({ ID: row.ID })
  if (res.code === 0) {
    formData.value = res.data.reenterprise
    openDetailShow()
  }
}


// 关闭详情弹窗
const closeDetailShow = () => {
  detailShow.value = false
  formData.value = {
    name: '',
    classifyId: null,
    msg: '',
  }
}


// 打开弹窗
const openDialog = () => {
  type.value = 'create'
  dialogFormVisible.value = true
}

// 关闭弹窗
const closeDialog = () => {
  dialogFormVisible.value = false
  formData.value = {
    name: '',
    classifyId: null,
    msg: '',
  }
}
// 弹窗确定
const enterDialog = async () => {
  elFormRef.value?.validate(async (valid) => {
    if (!valid) return
    let res
    switch (type.value) {
      case 'create':
        res = await createEnterprise(formData.value)
        break
      case 'update':
        res = await updateEnterprise(formData.value)
        break
      default:
        res = await createEnterprise(formData.value)
        break
    }
    if (res.code === 0) {
      ElMessage({
        type: 'success',
        message: '创建/更改成功'
      })
      closeDialog()
      getTableData()
    }
  })
}

//打开分类弹窗
const classifyDialog = ref(false)
const classifyDoDialog = ref(false)


// 打开分类弹窗
const openClassifyDialog = () => {
  classifyDialog.value = true
}
//打开分类子弹窗
const openClassifyDoDialog = () => {
  classifyDoDialog.value = true
}
const classiftySearch = ref('')
const filterClassifyList = computed(() =>
  classifyList.value.filter(
    (data) =>
      !classiftySearch.value ||
      data.name.toLowerCase().includes(classiftySearch.value.toLowerCase())
  )
)
// 删除
const classifyDelete = (row) => {
  ElMessageBox.confirm('确定要删除吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteClassify(row)
    getClassifyData()
  })
}

const classifyDataForm = ref({
  ID: null,
  name: null,
})
const classifyDataFormRef = ref()

//添加
const openClassifyAdd = () => {
  type.value = "create"
  classifyDataForm.value = {
    name: ""
  }
  openClassifyDoDialog()
}
//修改
const openClassifyUpdate = (row) => {
  type.value = "update"
  classifyDataForm.value = {
    ID: row.ID,
    name: row.name
  }
  openClassifyDoDialog()
}
//关闭分类弹窗
const closeClassifyDialog = () => {
  classifyDialog.value = false
}

// 弹窗确定
const enterClassifyDoDialog = async () => {
  classifyDataFormRef.value?.validate(async (valid) => {
    if (!valid) return
    let res
    switch (type.value) {
      case 'create':
        res = await createClassify(classifyDataForm.value)
        break
      case 'update':
        res = await updateClassify(classifyDataForm.value)
        break
      default:
        res = await createClassify(classifyDataForm.value)
        break
    }
    if (res.code === 0) {
      ElMessage({
        type: 'success',
        message: '创建/更改成功'
      })
      closeClassifyDoDialog()
      getClassifyData()
    }
  })
}
const closeClassifyDoDialog = () => {
  classifyDoDialog.value = false
  classifyDataForm.value = {
    ID: null,
    name: null,
  }
}

const find = (a, b) => {
  a.findIndex((role) => role.ID === b)
  return a[0]
}
</script>

<style>
</style>
